﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="~/layui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/layui/vue.min.js"></script>
    <script src="~/layui/lib/index.js"></script>
    <script src="~/layui/polyfill.min.js"></script>
    <script src="~/layui/axios.js"></script>
    <style>
        .el-dialog__body {
            padding: 0 10px;
        }

        .el-table td {
            padding: 0;
        }

        .el-table__row {
            height: 48px;
        }

        .el-table .spanClass {
            display: block;
            width: 100%;
            min-width: 100px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="height:50px;width:100%;line-height:50px;position:fixed;top:0;z-index:5;">
            <el-button type="primary" icon="el-icon-plus" v-on:click="addDialog()">新增</el-button>
            <el-button type="success" icon="el-icon-document-checked" v-bind:disabled="checkedList.length <= 0" v-on:click="save()">保存</el-button>
            @*<el-link type="primary" href="/ViewAuthorize/Index">首页</el-link>*@
        </div>
        <el-table :data="ElevatorInfoList" style="width: 100%;margin-top:50px;" highlight-current-row v-on:selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="id" label="编号" width="100"></el-table-column>
            <el-table-column prop="actualfloor" label="实际楼层" align="center">
                <template slot-scope="scope">
                    <span v-show="isShow && scope.$index === rowIndex && scope.column.property===columnProperty">
                        <el-input v-bind:id="scope.$index+'cell0key'" v-model.number="scope.row.actualfloor" placeholder="请输入物理楼层" size="mini" v-on:blur="inputBlur" />
                    </span>
                    <span class="spanClass" v-on:click="editCurrRow(scope,'cell0key')" v-show="!isShow || scope.$index !== rowIndex || scope.column.property!==columnProperty">{{ scope.row.actualfloor }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="physicsfloor" label="物理楼层" align="center">
                <template slot-scope="scope">
                    <span v-show="isShow && scope.$index === rowIndex && scope.column.property===columnProperty">
                        <el-input v-bind:id="scope.$index+'cell1key'" v-model.number="scope.row.physicsfloor" placeholder="请输入物理楼层" size="mini" v-on:blur="inputBlur" />
                    </span>
                    <span class="spanClass" v-on:click="editCurrRow(scope,'cell1key')" v-show="!isShow || scope.$index !== rowIndex || scope.column.property!==columnProperty">{{ scope.row.physicsfloor }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="displayfloor" label="显示楼层" align="center">
                <template slot-scope="scope">
                    <span v-show="isShow && scope.$index === rowIndex && scope.column.property===columnProperty">
                        <el-input v-bind:id="scope.$index+'cell2key'" v-model="scope.row.displayfloor" placeholder="请输入物理楼层" size="mini" v-on:blur="inputBlur" />
                    </span>
                    <span class="spanClass" v-on:click="editCurrRow(scope,'cell2key')" v-show="!isShow || scope.$index !== rowIndex || scope.column.property!==columnProperty">{{ scope.row.displayfloor }}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="新增" :visible="addDialogVisible" width="50%" top="5vh" v-on:close="addCancel()">
            <el-form ref="addElevatorInfoRef" :model="addElevatorInfo" label-width="80px">
                <el-form-item label="实际楼层" prop="actualfloor">
                    <el-input v-model.number="addElevatorInfo.actualfloor"></el-input>
                </el-form-item>
                <el-form-item label="物理楼层" prop="physicsfloor">
                    <el-input v-model.number="addElevatorInfo.physicsfloor"></el-input>
                </el-form-item>
                <el-form-item label="显示楼层" prop="displayfloor">
                    <el-input v-model="addElevatorInfo.displayfloor"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="saveElevatorInfo">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="编辑" :visible="editDialogVisible" width="50%" top="5vh" v-on:close="editCancel()">
            <el-form ref="editElevatorInfoRef" :model="editElevatorInfo" label-width="80px">
                <el-form-item label="实际楼层" prop="actualfloor">
                    <el-input v-model.number="editElevatorInfo.actualfloor"></el-input>
                </el-form-item>
                <el-form-item label="物理楼层" prop="physicsfloor">
                    <el-input v-model.number="editElevatorInfo.physicsfloor"></el-input>
                </el-form-item>
                <el-form-item label="显示楼层" prop="displayfloor">
                    <el-input v-model="editElevatorInfo.displayfloor"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="updateElevatorInfo">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <script src="~/layui/jquery-3.3.1.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data:function() {
                return {
                    ElevatorInfoList: [],
                    addDialogVisible: false,
                    addElevatorInfo: {
                        actualfloor: '',
                        physicsfloor: '',
                        displayfloor: ''
                    },
                    editDialogVisible: false,
                    editElevatorInfo: {},
                    blankRowData: {
                        id: 0,
                        actualfloor: '0',
                        physicsfloor: '0',
                        displayfloor: '0'
                    },
                    tabClickIndex: null, // 点击的单元格
                    tabClickLabel: '', // 当前点击的列名,
                    isShow: false,
                    rowIndex: -1,
                    columnProperty: '',
                    checkedList: []
                }
            },
            created:function() {
                this.query()
            },
            methods: {
                query: function () {
                    var _this = this;
                    $.ajax({
                        url: '/api/ElevatorInfo/GetAllFloor',
                        type: 'post',
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (res) {
                            console.log(res);
                            if (res.errcode !== 0) return _this.$message.error(res.errmsg)
                            _this.ElevatorInfoList = res.data
                        }
                    })
                },
                addDialog:function() {
                    this.ElevatorInfoList.unshift({
                        id: 0,
                        actualfloor: 0,
                        physicsfloor: 0,
                        displayfloor: 0
                    })
                    //this.addDialogVisible = true
                },
                saveElevatorInfo: function () {
                    var _this = this;
                    this.$refs.addElevatorInfoRef.validate(function(valid) {
                        if (!valid) return false;
                        
                        $.ajax({
                            url: '/api/ElevatorInfo/InsertFloorInfo',
                            type: 'post',
                            dataType: 'json',
                            data: JSON.stringify(_this.addElevatorInfo),
                            contentType: 'application/json',
                            success: function (res){
                                if (res.errcode !== 0) return _this.$message.error(res.errmsg)
                                _this.$message.success('新增成功')
                                _this.addDialogVisible = false
                                _this.query()
                            }
                        })
                    })

                },
                addCancel: function () {
                    this.$refs.addElevatorInfoRef.resetFields()
                    this.addDialogVisible = false
                },
                // 编辑
                editDialog:function(row) {
                    this.editElevatorInfo = row;
                    this.editDialogVisible = true
                },
                updateElevatorInfo: function () {
                    var _this = this;
                    this.$refs.editElevatorInfoRef.validate(function(valid) {
                        if (!valid) return false;
                        
                        $.ajax({
                            url: '/api/ElevatorInfo/UpdateFloorInfoByID',
                            type: 'post',
                            dataType: 'json',
                            data: JSON.stringify(_this.editElevatorInfo),
                            contentType: 'application/json',
                            success: function (res) {
                                if (res.errcode !== 0) return _this.$message.error(res.errmsg)
                                _this.$message.success('修改成功')
                                _this.editDialogVisible = false
                                _this.query()
                            }
                        })
                    })
                },
                editCancel: function() {
                    this.$refs.editElevatorInfoRef.resetFields()
                    this.editDialogVisible = false
                },
                inputBlur: function(row, event, column) {
                    this.isShow = false;
                },
                editCurrRow: function(rowIndex, rowkey) {
                    console.log(rowIndex)
                    this.isShow = true;
                    this.rowIndex = rowIndex.$index;
                    this.columnProperty = rowIndex.column.property;
                    var id = rowIndex.$index + rowkey;
                    setTimeout(function(){
                        document.getElementById(id).focus();
                    }, 100)
                },
                handleSelectionChange: function(selections) {
                    this.checkedList = selections;
                },
                save: function() {
                    console.log(this.checkedList);
                    var _this = this;
                    axios({
                        method: 'post',
                        url: '/api/ElevatorInfo/UpdateFloorInfo',
                        data: _this.checkedList
                    }).then(function (res) {
                        if (res.data.errcode !== 0) return _this.$message.error(res.data.errmsg)
                        _this.$message.success('保存数据成功');
                        _this.query();
                    })
                }
            }
        })
    </script>

</body>
</html>